<!--校历组件-->
<template>
  <div class="calendar-book">
    <div class="calendar-page left-page">
      <p class="underline">{{ currentYear }}年{{ currentMonth }}月</p>
      <p class="underline">TODAY</p>
      <p class="underline">{{ currentDay }}</p>
      <p>星期{{ currentWeekday }}</p>
    </div>
    <div class="calendar-page right-page">
      <p class="underline">{{ currentTerm }}</p>
      <p class="underline">WEEK</p>
      <p class="underline">{{ currentTeachingWeek }}</p>
      <p>教学周</p>
    </div>
  </div>
</template>


<script>
import service from '@/utils/service';

export default {
  data() {
    return {
      date: new Date(),
      termStartDate: new Date(),
      termEndDate: new Date(),
      termName: "",
      days: ["日", "一", "二", "三", "四", "五", "六"],
    };
  },
  computed: {
    currentYear() {
      return this.date.getFullYear();
    },
    currentMonth() {
      return this.date.getMonth() + 1;
    },
    currentDay() {
      return this.date.getDate();
    },
    currentWeekday() {
      return this.days[this.date.getDay()];
    },
    currentTerm() {
      if (this.date >= this.termStartDate && this.date <= this.termEndDate) {
        return this.termName;
      } else {
        return "假期";
      }
    },
    currentTeachingWeek() {
      if (this.date.getTime() >= this.termStartDate.getTime() && this.date.getTime() < this.termEndDate.getTime()) {
        let diff = this.date.getTime() - this.termStartDate.getTime();
        let week = Math.ceil(diff / (7 * 24 * 60 * 60 * 1000));
        return week;
      } else {
        return 0;
      }

    },
  },
  methods: {
    //获取校历信息
    async fetchSchoolCalendar() {
      try {
        const response = await service.get(
          "/calendars"
        );
        if (response.data.code === 20041) {
          const calendarData = response.data.data;
          this.termStartDate = new Date(calendarData.begin_date);
          this.termEndDate = new Date(calendarData.end_date);
          this.termName = calendarData.term;
        } else {
          console.error("获取校历信息失败");
        }
      } catch (error) {
        console.error("获取校历信息失败", error);
      }
    },
  },
  created() {
    this.fetchSchoolCalendar(); // 在组件创建时获取校历信息
  },
};
</script>

<style scoped>
.calendar-book {
  width: 300px;
  height: 210px;
  box-shadow: inset 0px -5px #d3b80a;
  display: flex;
  justify-content: space-between;
  background-color: #fff8dc;
}

.calendar-page {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 5px;
}

.left-page {
  border-right: none;
  border: 1px solid black;
}

.right-page {
  border-left: none;
  border: 1px solid black;
}

p {
  margin: 5px;
  padding: 0;
  font-size: 20px;
}

p:nth-child(3) {
  font-size: 30px;
}

.underline {
  text-decoration: underline;
}
</style>
